<script setup lang="ts">
import { computed, onMounted } from 'vue';

const props: any = defineProps<{
    ujt: any;
    opt: any;
}>();

const { $fn, $db, $global } = props.ujt;
const { delItem, editItem, readItem, setShow, fetchContent, optConfirm } =
    $fn.useChannel(props);

onMounted(() => {
    fetchContent(0);
    readItem($global.location.query?.show);
});

$db[props.opt.channel].cmPageSize = computed(() => {
    return (
        Number(
            $global.location.query.ps || $db[props.opt.channel].config?.ps
        ) || 5
    );
});
const { getPageList } = $fn.usePage(props);

$db[props.opt.channel].cmPageList = computed(() => {
    return getPageList($db[props.opt?.channel]?.cmPageSize);
});
</script>

<template>
    <template
        v-for="item in $db[props.opt.channel].list"
        :key="'list' + (item?.sn || '')"
    >
        <slot :item="item" :opt="{ setShow, delItem, editItem, optConfirm }">
            <div
                :class="{
                    li: true,
                    cur: item?.sn && $global.location.query?.show === item?.sn,
                }"
            >
                <div
                    class="li"
                    :title="item?.tit || ''"
                    @pointerdown.stop
                    @pointerup.stop="setShow(item?.sn || '')"
                >
                    {{ item?.tit || '' }}
                </div>
                <div class="btns" v-if="3 < $global.user?.info?.lv">
                    <div
                        @pointerdown.stop
                        @pointerup.stop="
                            optConfirm({
                                con:
                                    $fn.lg(
                                        props.opt.channel + '.ui.delconfirm'
                                    ) || $global.lang.asai.delconfirm,
                                fn: () => {
                                    delItem(item?.sn);
                                },
                            })
                        "
                    >
                        {{ $fn.lg(props.opt.channel + '.ui.del') }}
                    </div>
                    <div @pointerdown.stop @pointerup.stop="editItem(item.sn)">
                        {{ $fn.lg(props.opt.channel + '.ui.edit') }}
                    </div>
                </div>
            </div>
        </slot>
    </template>
</template>

<style scoped lang="scss"></style>
